<script setup>
import { ref, onMounted } from "vue";
//import httpInstance from "@/utils/http";
import { useRoute } from "vue-router";
import { formatDateToYMD } from "@/utils/dateUtil";
import { useRouter } from "vue-router";
import { interceptor } from "@/utils/interceptor";
// 获取传递过来的课程id
const route = useRoute();
const router = useRouter();
const routeId = ref(route.params.courseId);
const exams = ref([]);
const info = ref({
  courseName: "",
  instructorName: "",
  className: "",
  enrolledNumber: "",
  imgPath: "",
});
onMounted(() => {
  const httpInstance = interceptor();
  httpInstance.get(`/student/course/${routeId.value}`).then((res) => {
    console.log(res.data.data);
    info.value.courseName = res.data.data.courseName;
    info.value.instructorName = res.data.data.instructorName;
    info.value.className = res.data.data.className;
    info.value.enrolledNumber = res.data.data.enrolledNumber;
    info.value.imgPath = res.data.data.imgPath;
    for (let i = 0; i < res.data.data.exams.length; i++) {
      exams.value.push({
        id: res.data.data.exams[i].id,
        endTime: formatDateToYMD(res.data.data.exams[i].endTime),
        enrolledNumber: res.data.data.exams[i].enrolledNumber,
        imgPath: res.data.data.exams[i].imgPath,
        instructorName: res.data.data.exams[i].instructorName,
        name: res.data.data.exams[i].name,
        startTime: formatDateToYMD(res.data.data.exams[i].startTime),
        duration: res.data.data.exams[i].duration,
      });
    }
  });
});
const goToExam = (examId) => {
  router.push({
    name: "studentExamDetail",
    params: { examId },
  });
};
</script>

<template>
  <div class="detail">
    <div class="img">
      <img src="@/assets/img/logo.jpg" alt="课程图片" />
    </div>
    <div class="intro">
      <span class="courseName">{{ info.courseName }}</span>
      <ul>
        <li>任课老师：{{ info.instructorName }}</li>
        <li>上课班级：{{ info.className }}</li>
        <li>上课人数：{{ info.enrolledNumber }}人</li>
      </ul>
    </div>
  </div>
  <div class="courseContent">
    <el-icon size="300%"><EditPen /></el-icon>
    <h1>考试信息</h1>
  </div>
  <div  v-if="exams && exams.length > 0" class="examContainer">
    <div v-for="exam in exams" :key="exam.id" class="exam">
      <div class="exam-left">
        <span class="title">{{ exam.name }}</span>
        <span class="time">
          考试开始时间: {{ exam.startTime }} 考试结束时间: {{ exam.endTime }} 时限:{{exam.duration}}分钟
        </span>
        <span class="remark">
          考试注意点:
          <ol>
            <li>本次考试为线上闭卷考试</li>
            <li>本次考试不允许提前进入！</li>
            <li>考试开始时间10分钟后不进入考试即无法再进入考试,本次考试直接判零分！</li>
          </ol>
        </span>
        <div class="remarkDetail">详细考试须知</div>
      </div>
      <div class="exam-right" @click="goToExam(exam.id)">进入考试</div>
    </div>
  </div>
  <div v-else class="noData">
    暂无考试哦
  </div>
</template>

<style scoped lang="scss">
.detail {
  display: flex;
  flex-direction: row;

  .img {
    width: 38%;
    height: 40vh;

    margin-left: 3%;
    margin-top: 2%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9);
    img {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  }
  .intro {
    margin-left: 4%;
    margin-top: 2%;
    width: 40%;
    height: 40vh;

    .courseName {
      display: flex;
      font-size: 350%;
      font-weight: 550;
      margin-left: 5%;
      margin-top: 10%;
    }
    ul {
      margin-top: 5%;
      li {
        font-size: 150%;
        font-weight: 500;
        list-style: none;
      }
    }
  }
}

.courseContent {
  width: 100vw;
  margin-top: 5%;
  margin-left: 3%;

  display: flex;
  h1 {
    margin-left: 1%;
  }
}
.examContainer {
  width: 100vw;
  height: auto;
  background-color: rgb(255, 255, 255);
  margin-top: 1%;

  .exam {
    width: 80%;
    height: 20vh;
    background-color: rgb(224, 221, 221);
    margin-left: 6%;
    margin-right: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);

    .exam-left {
      width: 100%;
      display: flex;
      flex-direction: column;
      .title {
        margin-left: 3%;
        margin-top: 1%;
        font-size: 150%;
      }
      .time {
        margin-left: 3%;
      }
      .remark {
        margin-top: 1%;
        margin-left: 3%;
      }
      .remarkDetail {
        width: 15%;
        margin-left: 3%;
        color: rgb(82, 190, 223);
        cursor: pointer; /* 鼠标悬停时显示手型 */
        &:hover {
          color: black;
        }
      }
    }
    .exam-right {
      display: flex;
      width: 15%;
      background-color: rgb(202, 202, 222);

      align-items: center;
      justify-content: center;
      font-size: 200%;
      cursor: pointer;
      &:hover {
        color: white;
        background-color: rgba(176, 170, 170, 0.2); /* 鼠标悬停时的背景效果 */
      }
    }
  }
}

.noData{
 font-size:52px;
 width:100%;
 margin-left:0%;
 margin-top:2%;
 text-align: center;
 color:#938c8c;
}
</style>
